<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            display: flex;
            justify-content: flex-start;
        }

        .navigation {
            display: flex;
            background-color: rgb(48, 65, 86);
            height: 100vh;
            width: 12rem;
            justify-content: center;
            list-style-type: none;
        }

        .wrap {
            display: flex;
            justify-content: center;
            background-color: rgb(48, 65, 86);
            width: 10rem;
            height: 1rem;
            color: inherit;
            color: white;
            text-decoration: none;
            padding-right: 1rem;
            margin: 3rem;
        }

        .selected {
            color: #7B8CFE;
        }

        .background {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            background-color: #eceff7;
        }

        .container {
            display: flex;
            justify-content: start;
            align-items: start;
            flex-direction: column;
            overflow: auto;
            overflow-x: hidden;
            background-color: #ffffff;
            border-radius: 0.625rem;
            width: 62.5rem;
            height: 18.75rem;
            margin-top: 2rem;
            margin-left: 2rem;
            padding-bottom: 2rem;
        }

        .title {
            display: flex;
            margin: 2rem;
            margin-left: 2.5rem;
            margin-bottom: 1rem;
        }

        .title-text {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .content {
            display: inline-block;
            font-weight: bold;
            font-size: 1rem;
            text-align: start;
            padding-right: 2rem;
            width: 12.5rem;
        }

        .data {
            padding-left: 2.5rem;
        }

        .edit {
            padding-top: 0.25rem;
            font-size: 1rem;
            color: #7B8CFE;
        }

        .edit:hover {
            color: #000000;
        }

        .input {
            border: 1px solid #000000;
            border-radius: 5px;
        }

        .window-mask {
            /* display: flex; */
            display: none;
            background-color: rgb(0, 0, 0, 25%);
            z-index: 1;
            position: absolute;
            height: 100vh;
            width: 100%;
            top: 0rem;
            left: 0rem;
        }

        .container1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: auto;
            width: 25rem;
            height: 36.75rem;
            background-color: #ffffff;
            border-radius: 0.625rem;
        }

        .header {
            margin-top: 3.125rem;
            font-size: 1.5rem;
            font-weight: normal;
            text-align: center;
            line-height: 6.25rem;
        }

        .input-item {
            display: block;
            width: 15rem;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .btn {
            padding: 10px;
            text-align: center;
            margin-top: 40px;
            background-color: #7B8CFE;
            border: .0625rem solid #7B8CFE;
            color: #fff;
            border-radius: .625rem;
        }

        .btn:hover {
            background-color: #ffffff;
            border: .0625rem solid #7B8CFE;
            color: #000000;
        }

        #myTable {
            margin: auto;
            margin: 0rem 2rem 2rem 2rem;
            width: 58.5rem;
            height: 2rem;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <!-- 旁边的导航栏 -->
    <ul class="navigation" id="nav">
        <div class="menu-wrapper">
            <a href="./index.html" class="wrap">
                <li>
                    <span>首页</span>
                </li>
            </a>
            <a href="./mine.html" class="wrap selected">
                <li>
                    <span>我的</span>
                </li>
            </a>
            <a href="./identify.html" class="wrap" v-if="antiPosition">
                <li>
                    <span>管理员认证</span>
                </li>
            </a>
            <a href="./administrator.html" class="wrap" id="administrator" v-if="position">
                <li>
                    <span>管理账号</span>
                </li>
            </a>
        </div>
    </ul>
    <div class="background" id="root">
        <div class="container" style="overflow:hidden;">
            <div class="title">
                <span class="title-text">用户信息</span>
                <div class="data">
                    <span class="content edit" @click="edit" id="button">修改账号和密码</span>
                </div>
            </div>

            <div class="data">
                <span class="content">用户名:</span>
                <span class="content">{{userName}}</span>
                <!-- <input type="text" class="content input"> -->
            </div>
            <br>
            <div class="data">
                <span class="content">密码:</span>
                <span class="content">**********</span>
            </div>
            <br>
            <div class="data">
                <span class="content">用户权限:</span>
                <span class="content">{{authority}}</span>
            </div>
            <br>
            <div class="data">
                <span class="content">单日使用次数：</span>
                <span class="content">{{todayNumber}}</span>
            </div>
            <br>
            <div class="data">
                <span class="content">单日限制使用次数：</span>
                <span class="content">{{limitedNumber}}</span>
            </div>
            <br>
        </div>
        <div class="container">
            <div class="title">
                <span class="title-text" style="margin-bottom: 0rem;">历史记录</span>
            </div>
            <table id="myTable" style="margin-left: 3rem;">

            </table>
        </div>
        <div class="window-mask" id="window-mask">
            <div class="container1">
                <div class="header">编辑</div>
                <div class="form-wrapper">
                    <span>用户名：</span><input type="text" name="username" placeholder=用户名 class="input-item"
                        id="userName">
                    <span>密码：</span><input type="password" name="password" placeholder="密码" class="input-item"
                        id="passWord">
                    <div class="btn" @click="update">修改</div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    Vue.config.productionTip = false; //阻止生成生产提示

    // 实例化vue
    const x = new Vue({
        el: '#root',
        data: {
            userId: localStorage.getItem("userId"),
            userName: localStorage.getItem("userName"),
            passWord: localStorage.getItem("passWord"),
            position: localStorage.getItem("position"),
            todayNumber: localStorage.getItem("todayNumber"),
            limitedNumber: localStorage.getItem("limitedNumber"),
            authority: "普通用户"
        },
        mounted() {
            this.onload();
        },
        methods: {
            onload(userId) {
                //显示用户身份
                if (this.position) { //是管理员
                    this.authority = "管理员"
                } else {
                    this.authority = "普通用户"
                }

                // //渲染历史记录
                axios({
                    method: 'POST',
                    url: 'http://localhost:9999/history/selectByUserId', //输入用户id，输出历史记录
                    data: {
                        userId: this.userId
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    console.log(response.data)
                    var table = document.getElementById('myTable');

                    //整理历史记录数据
                    var isChatgpt = []
                    var data = [];
                    for (let i = 0; i < response.data.data.historyList.length; i++) {
                        isChatgpt.push(response.data.data.historyList[i].isChatgpt)
                        data.push(response.data.data.historyList[i].context)
                    }

                    //将历史记录放到表单内
                    for (var i = 0; i < data.length; i++) {
                        var row = table.insertRow(i);
                        var cell = row.insertCell(0);

                        if (isChatgpt[i]) {
                            data[i] = "ChatGPT：" + data[i];
                        } else {
                            data[i] = this.userName + "：" + data[i];
                        }
                        cell.innerHTML = data[i];
                    }
                });
            },

            edit() {
                //展示编辑框
                var container = document.getElementById("window-mask");
                container.style = "display:flex;";
            },

            update() {
                //修改用户信息
                var userName = document.getElementById("userName").value
                var passWord = document.getElementById("passWord").value
                const data = {
                    userId: Number(this.userId),
                    userName: userName == "" ? this.userName : userName,
                    passWord: passWord == "" ? this.passWord : passWord
                }

                axios({
                    method: 'POST',
                    url: 'http://localhost:9999/user/updateUserName',
                    data: data,
                    timeout: 10000, // 设置超时时间为5000毫秒（5秒）
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    //显示成功信息
                    console.log(response.data);

                    //把新信息存入localStorage中
                    localStorage.setItem('userName', data.userName);
                    localStorage.setItem('passWord', data.passWord);
                }).catch(error => {
                    if (error.response) {
                        // 服务器返回了状态码是error.response.status的响应  
                        console.error(error.response.data);
                        console.error(error.response.status);
                        console.error(error.response.headers);
                    } else if (error.request) {
                        // 请求已发出，但没有收到响应  
                        console.error('Error', error.message);
                    } else {
                        // 发送请求时发生了其他错误  
                        console.error('Error', error.message);
                        alert("您的用户名或密码输入错误！")
                    }
                });

                //去除编辑框
                var container = document.getElementById("window-mask");
                container.style = "display:none;";

                //刷新页面
                if (confirm("更改成功！")) {
                    window.location.reload();
                }
            }
        },
        computed: {
            antiPosition() {
                return !this.position
            }
        }
    })

    //导航栏对应的vue
    const nav = new Vue({
        el: '#nav',
        data: {
            position: localStorage.getItem("position"),
        },
        computed: {
            antiPosition() {
                return !this.position
            }
        }
    })
</script>

</html>